```html
<script setup>
  import * as colorPicker from "@zag-js/color-picker"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"

  const service = useMachine(colorPicker.machine, {
    id: "1",
    defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
  })

  const api = computed(() => colorPicker.connect(service, normalizeProps))
</script>

<template>
  <div v-bind="api.getRootProps()">
    <div>
      <div v-bind="api.getTransparencyGridProps({ size: '4px' })" />
      <div v-bind="api.getSwatchProps({ value: api.value })" />
    </div>
    // ...
  </div>
</template>
```
